<template>
    <section>
        <div v-show="ifShowRule" class="detailRule" ref="detailRule" :style="{height: detailRuleHeight}">
            <img src="../../assets/mall/gzdt.png">
            <div class="ruleInfo">
                <div class="ruleTitle">规则说明</div>
                <div class="ruleContent">
                    <p>省钱的方法有千万种，但是最痛快只有一种，就是免费拿！携玩乐销商城新玩法上线啦！！【众筹免单】，邀约好友帮你众筹，成功后你就可免费获得该产品，而支持你的好友不管众筹成功与否，均可获得该产品高额优惠券，同时还将以支持金的双倍给予返还！</p>
                    <p class="ruleNum">一、参与规则</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 1、选择心仪商品，发起众筹。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 2、自主设定本次众筹支持人数（可选范围30-50人，以5递增）。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 3、邀约好友支持众筹，其中首笔支持金须自筹，每一个众筹行为每位好友只能支持一次。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 4、每人只可同步发布三条众筹信息，且均为不同产品。</p>
                    <p class="ruleNum">二、众筹结果及奖励</p>
                    <p class="ruleNum">&nbsp;&nbsp;&nbsp; 1、众筹成功</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;情况一：</span>
                        在72小时内邀请支持好友达到设定人数，视为众筹成功。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;情况二：</span>
                        发起众筹后，在规定时间内当支持人数未达设定人数时，发起者可自筹补足获得该产品，视为众筹成功。</p>
                    <p class="ruleNum"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;奖&nbsp;&nbsp;&nbsp;励：</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;· </span>发起者：免费获得该众筹产品，在【我的众筹】中领取，有效期为3天。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;· </span>支持者：在支持成功后，将立即获得该产品高额优惠券，在【我的卡券】中领取，有效期为3天；并获得本次支持金2倍比例的消费积分，可在商城购买任意商品时抵扣使用。（自筹补足不奖励消费积分)</p>
                    <p class="ruleNum">2、众筹失败</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        在规定时间内，支持人数未达标准，同时众筹发起者放弃自筹补足剩余部分，即视为众筹失败。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;奖&nbsp;&nbsp;&nbsp;励：</span>
                        发起者与支持者均可获得该产品高额优惠券和支持金2倍比例的消费积分。</p>
                </div>
                <div class="closeBtn">
                    <img src="../../assets/mall/gzgb.png" @click="closeRule">
                </div>
            </div>
        </div>
        <goback :getName='goName'></goback>
        <div class="topImg">
            <img src="../../assets/mall/zcbanner.png">
            <div class="rule" @click="rule">
                <div>?</div>
                <div>规则</div>
            </div>
        </div>
        <div class="shadow" v-if="showShadow" @click="hiddenShadow"></div>
        <div class="image">
            <div class="good-img">
                <img :src="goods.imgSrc" alt="">
                <div class="title">{{goods.name}}</div>
            </div>
            <!-- 缩略图 -->
            <div class="img_small">
                <span v-for="(img,index) of goods.imgs" :class="{'active':index===mark}" @click="change(img,index)" :key="index">
                    <img :src="img" alt="">
                </span>
            </div>
            <div class="goods-info" v-if="$route.params.join == 1 || $route.params.joinPeople == 1">
                <span class="price">每人支持金额：<span class="red">￥{{goods.price}}</span></span>
                <span class="stock">已获得支持：<span class="red">{{needCount}}</span>/{{allCount}}人</span>
            </div>
        </div>
        <!-- <div class="joinPeople" v-if="isShowJoinPeople"> -->
        <div class="joinPeople" v-if="$route.params.join == 1 || $route.params.joinPeople == 1">
            <div class="showTip">以下支持者将获得<span class="redClass">{{discount}}</span>元抵扣券及<span class="redClass">{{goods.price*2}}</span>积分(1积分等于1元)</div>
            <div class="peopleDetail">
                <div class="people" v-for="(people, index) of idInfos">
                    <div class="propleInfo">
                        <div class="headImg">
                            <img :src="people.photo">
                        </div>
                        <div class="peopleName">{{people.memberNick}}</div>
                    </div>
                    <div>赞助了<span>￥{{people.helpPrice/100}}</span> 元</div>
                </div>
            </div>
            <div class="QRCode_">
                <img src="../../assets/my/QRCode.jpg">
            </div>
            <div class="QRCodeWord">请扫码关注“携玩乐销”</div>
            <div class="QRCodeWord">天天有惊喜，日日有活动！</div>
        </div>
        <div class="content" v-if="isShowJoinPeople">
            <div class="commodity-info">商品信息</div>
            <div class="detail">
                <div class="detail-info">
                    <div>
                        <span class="detail-title">名称：</span>
                        <span>{{goods.name}}</span>
                    </div>
                    <div>
                        <span class="detail-title">规格：</span>
                        <span>{{goods.specifications}}</span>
                    </div>
                    <div>
                        <span class="detail-title">信息：</span>
                        <span>{{goods.information}}</span>
                    </div>
                </div>
                <div class="detail-img" v-for="(img,index) of goods.bigimg" :key="index">
                    <img :src="img" v-preview="img">
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <dl class="buy">
            <dd class="joinCrowdFunding" v-if="isJoinCrowdFunding&&!isSupport">
                <div @click="joinCrowdFunding">确认支持</div>
                <div @click="transmit">帮好友转发</div>
            </dd>
            <dd class="transmit" @click="transmit" v-if="isJoinCrowdFunding&&isSupport">{{transmitWord}}</dd>
            <dd class="launch" @click="launch" v-if="isLunchCrowdFunding">发起众筹</dd>
            <dd class="transmit" @click="transmit" v-if="isLunchedCrowdFunding">{{transmitWord}}</dd>
        </dl>
        <!-- 加入购物车 -->
        <transition name="skuInfos">
            <div class="skuInfos" v-if="isShow">
                <div class="selectSpecifications">
                    <div class="specifications">
                        <span class="skuInfoTitle">规格</span>
                        <div class="all-specifications">
                            <span v-for="(spe,index) of goods.specificationsCart" :key="index" :class="{'selected':index===option}" @click="select(index)">{{spe}}</span>
                        </div>
                    </div>
                    <div class="specifications">
                        <span class="skuInfoTitle">选择支持人数</span>
                        <div class="all-specifications">
                            <span v-for="(people,index) of peopleCount" :key="index" :class="{'selected':index===optionCount}" @click="select_(index)">{{people}}</span>
                        </div>
                    </div>
                </div>
                <span class="confirmInfos" @click="confirm">确定</span>
            </div>
        </transition>
        <lg-preview></lg-preview>
    </section>
</template>
<script>
    import { InfiniteScroll } from 'mint-ui'
    import loadmore from '../../components/loadmore'
    import goback from '../../components/goback'
    import { userInfoGet, WXShare } from '../../libs/publicMethod'
    import { ZCProduct, getClassifyInfos, getHelpMe, getInfoByZCInfo, getZCState } from '../../libs/interface' // 获取接口
    export default {
        components: { goback, loadmore, WXShare, userInfoGet, InfiniteScroll, ZCProduct, getClassifyInfos, getHelpMe, getInfoByZCInfo, getZCState },
        data() {
            return {
                userInfo: userInfoGet(),
                loading: false, // 下拉参数
                loadingDom: false,
                goName: '众筹商品',
                offset: sessionStorage.getItem('foundScrollOffset') ? JSON.parse(sessionStorage.getItem('foundScrollOffset')).offset || 0 : 0,
                ifShowRule: false,
                detailRuleHeight: '',  //规则高度
                imgSrc: '', //商品图片
                mark: 0, //缩略图下标
                goods: {},  //商品信息
                isShow: false,  //选择规格
                showShadow: false,  //选择规格时显示阴影
                option: '',  //选择的规格
                isJoinCrowdFunding: false,
                isLunchCrowdFunding: true,
                isLunchedCrowdFunding: false,
                skuId: '',
                isShowJoinPeople: true,
                idInfos: [],
                needCount: 0, //支持的人数
                allCount: '', //众筹总人数
                isShowTip: false,
                discount: 0,
                transmitWord: '',
                peopleCount: [30,35,40,45,50], //众筹人数
                optionCount: '', //选择的人数
                isSupport: false,
            }
        },
        methods: {
            rule() {
                let vm = this
                vm.ifShowRule = true
                vm.detailRuleHeight = document.documentElement.clientHeight - 38 + 'px'
            },
            closeRule() {
                this.ifShowRule = false
            },
            change(i, m) {
                this.goods.imgSrc = i
                this.mark = m
            },
            launch () {
                let vm = this
                vm.isShow = true
                vm.showShadow = true
            },
            confirm () {
                let vm = this
                if (vm.goods.specificationsCart.length && vm.option.length === 0) {
                    vm.$toast('请选择规格')
                    return
                }
                if (vm.optionCount.length === 0) {
                    vm.$toast('请选择众筹人数')
                    return
                }
                sessionStorage.setItem('peopleCount', JSON.stringify({ count: vm.peopleCount[vm.optionCount]}))
                sessionStorage.setItem('polishing', JSON.stringify({ polishing: false, receive: false }))
                // vm.$router.push('/crowdFundingPay/' + vm.$route.params.join + '/' + vm.$route.params.crowdFundingId + '/' + vm.goods.skuid[vm.option])
                location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx163c4c3d188f8ee5&redirect_uri=http%3A%2F%2Fwww.xiewan8.com%2FlyApp%2F%23%2FcrowdFundingPay%2F' +  vm.$route.params.join + '%2F' + vm.$route.params.crowdFundingId + '%2F' + vm.goods.skuid[vm.option] + '&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect'
            },
            hiddenShadow() {
                let vm = this
                if (!vm.isShow || !vm.showShadow) return
                vm.isShow = false
                vm.showShadow = false
            },
            transmit () {
                this.$toast('请点击右上角分享按钮')                
            },
            select (s) {
                this.option = s
            },
            select_ (s) {
                this.optionCount = s
            },
            joinCrowdFunding () {
                let vm = this
                sessionStorage.setItem('peopleCount', JSON.stringify({ count: vm.allCount }))
                sessionStorage.setItem('polishing', JSON.stringify({ polishing: false, receive: false }))
                // vm.$router.push('/crowdFundingPay/' + vm.$route.params.join + '/' + vm.$route.params.crowdFundingId + '/' + vm.skuId)
                location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx163c4c3d188f8ee5&redirect_uri=http%3A%2F%2Fwww.xiewan8.com%2FlyApp%2F%23%2FcrowdFundingPay%2F' + vm.$route.params.join + '%2F' + vm.$route.params.crowdFundingId + '%2F' + vm.skuId + '&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect'
            }
        },
        mounted () {
            let vm = this
            // console.log(vm.$route.path)
            // if (JSON.parse(sessionStorage.getItem('joinCrowdFunding')).join) {
            if (vm.$route.params.join == 1) {
                vm.isJoinCrowdFunding = true
                vm.isLunchCrowdFunding = false
                let params = {
                    memberId: vm.userInfo.id,
                    zcInfoId: vm.$route.params.crowdFundingId
                }
                getZCState(params, (data) => {
                    if (data.code === 1) {
                        if (data.payload[0].joinType == 1) {
                            vm.transmitWord = '转发好友'
                        }
                        if (data.payload[0].joinType == 2) {
                            vm.transmitWord = '帮好友转发'
                        }
                        if (data.payload[0].isSupport == 0) {
                            vm.isSupport = false
                        }
                        if (data.payload[0].isSupport == 1) {
                            vm.isSupport = true
                        }
                    } else {
                        vm.$toast('系统异常')
                    }
                })
                let param = {
                    // zcInfoId: JSON.parse(sessionStorage.getItem('joinCrowdFunding')).crowdFundingId
                    zcInfoId: vm.$route.params.crowdFundingId
                }
                getInfoByZCInfo(param, (data) => {
                    if (data.code === 1) {
                        vm.needCount = data.payload.voteNum
                        vm.allCount = data.payload.personNum
                    } else {
                        vm.$toast('系统异常')
                    }
                })
            }
            // if (JSON.parse(sessionStorage.getItem('joinCrowdFunding')).joinPeople) {
            let params = {
                // zcInfoId: JSON.parse(sessionStorage.getItem('joinCrowdFunding')).crowdFundingId
                zcInfoId: vm.$route.params.crowdFundingId
            }
            getHelpMe(params, (data) => {
                if (data.code === 1) {
                    vm.idInfos = data.payload
                } else {
                    vm.$toast('系统异常')
                }
            })
            let paramss = {
                // zcInfoId: JSON.parse(sessionStorage.getItem('joinCrowdFunding')).crowdFundingId
                zcInfoId: vm.$route.params.crowdFundingId
            }
            getInfoByZCInfo(paramss, (data) => {
                if (data.code === 1) {
                    vm.needCount = data.payload.voteNum
                    vm.allCount = data.payload.personNum
                    vm.discount = Math.floor((data.payload.needPrice - data.payload.clearPrice) / 300)
                } else {
                    vm.$toast('系统异常')
                }
            })
            if (vm.$route.params.joinPeople == 1) {
                // vm.isShowJoinPeople = true
                vm.isLunchCrowdFunding = false
                vm.isLunchedCrowdFunding = true
                let params = {
                    memberId: vm.userInfo.id,
                    zcInfoId: vm.$route.params.crowdFundingId
                }
                getZCState(params, (data) => {
                    if (data.code === 1) {
                        if (data.payload[0].joinType == 1) {
                            vm.transmitWord = '转发好友'
                        }
                        if (data.payload[0].joinType == 2) {
                            vm.transmitWord = '帮好友转发'
                        }
                    } else {
                        vm.$toast('系统异常')
                    }
                })
                // let params = {
                //     // zcInfoId: JSON.parse(sessionStorage.getItem('joinCrowdFunding')).crowdFundingId
                //     zcInfoId: vm.$route.params.crowdFundingId
                // }
                // getHelpMe(params, (data) => {
                //     if (data.code === 1) {
                //         vm.idInfos = data.payload
                //     } else {
                //         vm.$toast('系统异常')
                //     }
                // })
                // let param = {
                //     // zcInfoId: JSON.parse(sessionStorage.getItem('joinCrowdFunding')).crowdFundingId
                //     zcInfoId: vm.$route.params.crowdFundingId
                // }
                // getInfoByZCInfo(param, (data) => {
                //     if (data.code === 1) {
                //         vm.needCount = data.payload.voteNum
                //     } else {
                //         vm.$toast('系统异常')
                //     }
                // })
            }
            document.body.style.paddingBottom = '47px'
            let paramsss = {
                productId: vm.$route.params.id,
                memberId: vm.userInfo.id
            }
            getClassifyInfos(paramsss, (data) => {
                if (data.code === 1) {
                    vm.skuId = data.payload.sku.id
                    vm.goods = data.payload
                    vm.goods.bigimg = data.payload.sku.bigimg.split(',')
                    vm.goods.imgs = data.payload.product.banner.split(',')
                    vm.goods.imgSrc = vm.goods.imgs[0]
                    vm.goods.needPrice = data.payload.product.defaultPrice
                    vm.goods.price = Math.ceil(data.payload.product.defaultPrice / vm.allCount) / 100
                    vm.goods.specifications = ''
                    vm.goods.specificationsCart = []
                    vm.goods.skuid = []
                    data.payload.product.skuInfos.forEach(element => {
                        vm.goods.specifications += element.skuName + ' '
                        vm.goods.specificationsCart.push(element.skuName)
                        vm.goods.skuid.push(element.skuId)
                    })
                    vm.goods.information = data.payload.sku.skuProperties
                    vm.goods.name = data.payload.product.name
                    console.log(vm.goods.name)
                    let title1 = '请帮我免费拿' + vm.goods.name + '！！'
                    let info1 = '参加携玩乐销【众筹免单】，助我一臂之力，我们一起抢免单。'
                    let title2 = '我参与' + vm.goods.name + '【众筹免单】，请助我一臂之力！'
                    let info2 = '支持我！成功后你会获得【本产品大额优惠券】，而且支助金双倍返还！'
                    let share1 = {title: title1, info: info1}
                    let share2 = {title: title2, info: info2}
                    let share = [share1, share2]
                    let count = Math.round(Math.random())
                    if (sessionStorage.getItem('inviterID') !== -1) {
                        vm.goType = '/crowdFunding/0'
                    }
                    //分享请求配置
                    var Sdata = {
                        // gotoPage: vm.$route.path,
                        gotoPage: '/crowdFundingGoods/1/0/'+ vm.$route.params.crowdFundingId + '/' + vm.$route.params.id,
                        //邀请者链接
                        inviterID: userInfoGet().id,                                              //链接带的参数
                        type: 1,
                        desc: share[count].info,
                        //链接图片（小图）
                        imgUrl: vm.imgSrc,
                        //邀请话
                        shareTitle: share[count].title,
                    }
                    WXShare.topShare(Sdata)
                } else {
                    vm.$toast('系统异常')
                }
            })
        },
        computed: {
            
        }
    }
</script>
<style scoped>
.detailRule{
    position: absolute;
    margin: auto;
    top: 2.4rem;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, .65)
}
.detailRule img{
    margin-top: 5%;
    width: 80%;
    height: 90%;
}
.ruleInfo{
    margin-top: 5%;
    width: 80%;
    height: 90%;
    position: absolute;
    top: -1%;
    right: 0;
    bottom: 0;
    left: 1%;
    margin: auto;
}
.ruleTitle{
    font-size: .95rem;
    color: #F2F2F4;
}
.ruleContent{
    margin: 12% auto 0;
    width: 80%;
    height: 71%;
    margin-bottom: 2%;
    overflow: auto;
    font-size: .8rem;
    line-height: 1.5rem;
    text-align: left;
}
.ruleNum{
    font-weight: bold;
}
.closeBtn{
    position: relative;
    z-index: 10;
    width: 100%;
    margin: auto;
    -moz-box-shadow: 0rem -2rem 2rem -.3rem rgb(255, 255, 255); 
    -webkit-box-shadow: 0rem -2rem 2rem -.3rem rgb(255, 255, 255); 
    box-shadow: 0rem -2rem 2rem -.8rem rgb(255, 255, 255); 
}
.closeBtn img{
    width: 80%;
    height: 100%;
}
.topImg{
    width: 100%;
    position: relative;
}
.topImg img{
    display: block;
    width: 100%;
}
.rule{
    position: absolute;
    top: 12%;
    right: 0;
    color: #F2F2F4;
    background-color: #9F3725;
    width: 3.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.3rem;
    font-size: .7rem;
    border-top-left-radius: .65rem;
    border-bottom-left-radius: .65rem;
}
.rule div:first-child{
    width: .8rem;
    height: .8rem;
    line-height: .85rem;
    border-radius: .4rem;
    border: 1px solid #fff;
    transform: scale(.95, .95);
}
.rule div:last-child{
    margin: 0 .3rem 0 .15rem;
    height: .75rem;
    line-height: .9rem;
}
.shadow{
    width: 100%;
    height: 100%;
    z-index: 7;
    position: fixed;
    top: 0;
    background-color: rgba(0,0,0,.5)
}
.image{
    background-color: #fff;
}
.good-img{
    width: 100%;
    /* height: 21rem; */
    height: 18rem;
    position: relative;
}
.good-img img{
    width: 100%;
    height: 100%;
}
.title{
    background: rgba(45, 45, 45, .7);
    color: #fff;
    height: 2.5rem;
    line-height: 2.5rem;
    position: absolute;
    width: 96%;
    bottom: 0;
    font-size: .8rem;
    text-align: left;
    padding-left: 4%;
}
.img_small{
    display: flex;
    justify-content: center;
    white-space: nowrap;
    overflow: auto;
}
.img_small span{
    display: inline-block;
    width: 4rem;
    height: 3rem;
    margin: .2rem;
    border: 1px solid #fff;
    box-sizing: border-box;
}
.img_small img{
    width: 100%;
    height: 100%;
}
.img_small .active{
    border: 1px solid #C91F16;
}
.goods-info{
    display: flex;
    justify-content: space-around;
}
.goods-info span{
    display: inline-block;
    color: #333;
    font-size: .8rem;
}
.goods-info .red{
    color: #C91F16;
}
.goods-info>span{
    margin: .3rem 0;
}
.content{
    margin-top: .6rem;
    background-color: #fff;
    text-align: left;
}
.commodity-info{
    height: 2.2rem;
    line-height: 2.5rem;
    margin: 0 1rem;
    font-size: .8rem;
    border-bottom: 1px solid #DEDEDE;
}
.detail-info{
    padding-top: .7rem;
    font-size: .7rem;
    line-height: 1.4rem;
    color: #333;
    margin: 0 .8rem;
}
.detail-title{
    font-weight: bold;
}
.detail-img{
    width: 100%;
    display: inline-block;
    margin-top: .8rem;
    text-align: center;
}
.detail-img img{
    width: 94%;
    height: 100%;
    border-radius: 1rem;
    -moz-box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5); 
    -webkit-box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5); 
    box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5); 
}
.joinPeople{
    margin-top: .6rem;
    background-color: #fff;
}
.showTip{
    text-align: left;
    padding: 4% 0 0 5%;
    font-size: .8rem;
}
.peopleDetail{
    margin: 0 14% 0 5%;
    padding: 4% 0;
}
.people{
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .75rem;
    color: #444;
}
.people span{
    font-size: .95rem;
    font-weight: bold;
    color: #E22319;
}
.propleInfo{
    display: flex;
    align-items: center;
    width: 40%;
}
.headImg{
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
    overflow: hidden;
    margin-right: 10%;
}
.headImg img{
    width: 100%;
    height: 100%;
}
.buy{
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
}
.joinCrowdFunding{
    display: flex;
    height: 3rem;
    width: 100%;
}
.joinCrowdFunding div{
    width: 50%;
    height: 3rem;
    line-height: 3rem;
    background: linear-gradient(0deg,rgba(226,35,25,1),rgba(253,55,8,1));
    -moz-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    -webkit-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    color: #fff;
    font-size: 1.05rem;
}
.joinCrowdFunding div:last-child{
    background: rgba(247,247,247,1);
    -moz-box-shadow: 0rem -.2rem .8rem 0rem rgb(209, 209, 209) inset; 
    -webkit-box-shadow: 0rem -.2rem .8rem 0rem rgb(209, 209, 209) inset; 
    box-shadow: 0rem -.2rem .8rem 0rem rgb(209, 209, 209) inset; 
    color: rgb(19, 13, 13);
}
.launch, .transmit{
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    background: linear-gradient(0deg,rgba(226,35,25,1),rgba(253,55,8,1));
    -moz-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    -webkit-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    color: #fff;
    font-size: 1.05rem;
}
.skuInfos{
    width: 100%;
    background-color: #fff;
    -moz-box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5); 
    -webkit-box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5); 
    box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5);
    position: fixed; 
    bottom: 0;
    z-index: 10;
}
.selectSpecifications{
    min-height: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-bottom: 3rem;
    padding-top: 7%;
    /* background-color: aquamarine; */
}
.skuInfoTitle{
    font-size: .7rem;
    color: #333;
    min-width: 23%;
    text-align: left;
    margin: 0 9% 0 8.5%;
    display: inline-block;
    /* border: 1px solid red;; */
}
.specifications{
    /* border: 1px solid red; */
    text-align: left;
    /* border: 1px solid green; */
    display: flex;
    justify-content: space-between;
    margin-bottom: 4%;
    /* border: 1px solid purple; */
}
.specifications .selected{
    background-color: #E22319;
    color: #fff;
    border: 1px solid #E22319;
}
.all-specifications{
    width: 75%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: -1.5% 5% 0 -5%;
    /* border: 1px solid red; */
}
.all-specifications span{
    display: inline-block;
    border-radius: .4rem;
    padding: .3rem .8rem;
    margin: 1% 0 1% 5%;
    white-space:nowrap;
    font-size: .8rem;
    border: 1px solid #000;
}
.confirmInfos{
    display: block;
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    background: linear-gradient(0deg,rgba(226,35,25,1),rgba(253,55,8,1));
    box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    color: #fff;
    font-size: 1.05rem;
    position: absolute;
    bottom: 0;
}
.skuInfos-enter-active{
    transform: translateY(0);
    transition: all .3s ease;
}
.skuInfos-leave-active{
    transform: translateY(100%);
    transition: all .3s ease;
}
.skuInfos-enter{
    transform: translateY(100%);
}
.skuInfos-leave{
    transform: translateY(0);
}
.redClass{
    color: red;
}
.QRCode_{
    margin: 0 auto;
    width: 30%;
}
.QRCode_ img{
    width: 100%;
    height: 100%;
}
.QRCodeWord{
    font-size: .8rem;
}
</style>